import { Form, Button, Input, message } from "antd";
import { useEffect, useRef, useState } from "react";
import { useUserStore } from "@/store/user";
import { useForm } from "antd/es/form/Form";
import { upload } from "@/utils/upload";

export function Setting() {
  const inputRef = useRef<HTMLInputElement>(null);
  const [form] = useForm();
  const userStore = useUserStore();

  const [avatarUrl, setAvatarUrl] = useState<string>(
    "src/assets/img/head_portrait3.jpg"
  );

  // 数据回显
  useEffect(() => {
    async function query() {
      const res = await userStore.getUserInfo();
      const [success, data] = res;
      if (success) {
        form.setFieldsValue({ nickName: data.nickName });
        setAvatarUrl(data.avatar);
      }
    }
    query();
  }, []);

  const handleChangeAvatar = () => {
    if (inputRef.current) {
      inputRef.current.click();
    }
  };

  const uploadAvatar = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;
    const [success, data] = await upload(file);
    if (success) {
      setAvatarUrl(data.url);
    }
  };

  const onFinish = async (values: { nickName: string }) => {
    const data = {
      nickName: values.nickName,
      avatar: avatarUrl,
    };
    const res = await userStore.updateUserInfo(data);
    const [success] = res;
    if (success) {
      message.success("修改成功");
    }
  };

  return (
    <div className="m-6 ml-0 rounded-xl w-full bg-[#323644] ">
      <div className="w-[50%] mx-auto mt-6 ">
        <div className="flex flex-col items-center justify-center">
          <button
            className="relative w-[150px] h-[150px] rounded-full overflow-hidden bg-gradient-to-r from-[#6EE7B7] via-[#3B82F6] to-[#9333EA] shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:scale-105 group"
            onClick={handleChangeAvatar}
          >
            <img
              className="object-cover w-full h-full rounded-full transition-all duration-300 transform hover:scale-105"
              src={avatarUrl}
              alt="头像"
            />
            {/* 遮罩层 */}
            <span className="absolute top-0 left-0 w-full h-full bg-black/60 text-white font-semibold text-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-300">
              修改头像
            </span>
          </button>
          <input
            ref={inputRef}
            type="file"
            accept="image/*"
            className="invisible"
            onChange={uploadAvatar}
          />
        </div>
        <Form
          size="large"
          form={form}
          onFinish={onFinish}
          colon={false}
          autoComplete="off"
        >
          <Form.Item label="昵称" name="nickName">
            <Input />
          </Form.Item>
          <Form.Item>
            <Button className="h-[40px]" type="primary" htmlType="submit">
              保存修改
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
